﻿@model GPS.ENTITYS.ViewModelDKH_DT

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Select2</title>
    <link href="~/Scripts/select2.css" rel="stylesheet" />
    <link href="~/Scripts/select2.min.css" rel="stylesheet" />
    @*<script src="~/Scripts/jquery-2.1.4.js"></script>*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
  
    <script src="~/Scripts/bootstrap.js"></script>

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div> 
        @using (Html.BeginForm())
        {
            <br /><br />
            @Html.DropDownListFor(model => model.pKH_MA, Enumerable.Empty<SelectListItem>(), new { @id = "KH_MA", @class = "form-control" })
            <select id="select" name="select" class="select2">
                <option value="" selected disabled>Please Select Above Field</option>
            </select>
            <br /><br />
            <input type="hidden" id="thisid" style="width:300px;" />
            @*<select id='thisid' class='select2-input select2'></select>*@

            <button type="submit">Submit</button>
            <p>No HttpPost method is implemented for Submit button in this example.</p>
            <br /><br />
        }

        <script type="text/javascript">
            var pageSize = 20;
            var optionListUrl = '@Url.Action("Select2KH_MA", "GPS_KhoaHoc")';
            //$("#thisid").select2({
            //    multiple: true,
            //    closeOnSelect: true,

            //    ajax: {
            //        url: optionListUrl,
            //        dataType: 'json',
            //        delay: 250,
            //        data: function (params) {
            //            return {
            //                searchTerm: params.term,
            //                dvgtvt_ma: '40004'
            //            };
            //        },
            //        processResults: function (data, page) { //json parse
            //            console.log("processing results");
            //            Transform your json here, maybe using $.map jquery method
            //            return {
            //                results: yourTransformedJson
            //            };
            //        },
            //        cache: {(maybe)true

            //    }
            //});

            // ============== Code For General Select2 ==============

            $('#KH_MA').select2(
                    {
                        ajax: {
                            delay: 50,
                            url: optionListUrl,
                            dataType: 'json',

                            data: function (params) {
                                /// params.page = params.page || 1;
                                return {
                                    searchTerm: params.term,// + "#" + $("#DVGTVT_MA").val(),
                                    dvgtvt_ma: '40004'
                                    //pageNumber: params.page results: JSON.parse(data)
                                };
                            },
                            results: function (data, params) {
                              
                                return {
                                    results: data.Results
                                };
                            }
                        },
                        placeholder: "-- Chọn khóa học --",
                        minimumInputLength: 2,
                        allowClear: true,
                    });

            // ============== End of code of General Select2 ==============


            // ============== End of Code for Select2 with Option Groups ==============

        </script>
    </div>
</body>
</html>
